<!DOCTYPE html>
<html>
<body>
<!-- 创建画布 -->
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;"></canvas>
 
<script>

const c=document.getElementById("myCanvas"); //获取画布
const ctx=c.getContext("2d");  // 定义为2d画面

ctx.font = 'bold 15px sans-serif'; // 设置字体属性

// ---------------------------------------------------> 画单行

// const text = '小建建'
// ctx.fillText(text, 10, 20) // 将字体画至画布中

// ---------------------------------------------------> 画单行


// ---------------------------------------------------> 画多行
const arr = ['tony110(tony)', 'tony110@iphoto.hk', '0408'] // 待画数据

let h = 100 // 起始高度
ctx.textAlign = 'center'; // 字体居中
arr.map(e=>{
  h += 20
  ctx.fillText(e, c.width/2, h); // 将字体画至画布中
})
// ---------------------------------------------------> 画多行

</script>
</body>